<template>
  <div class="point-position">
    <el-radio-group v-model="formData.pointPlace" @change="changePoint">
      <el-radio v-for="(item, index) in POINT_PLACE_LABEL" :key="index" :label="item.value">
        {{ item.label }}
        <el-button
          v-if="![0, 4].includes(item.value) && item.value === currentValue"
          type="text"
          class="ml-20"
          @click="selectPoint(item.value)"
        >
          点击选择
        </el-button>
        <!-- 指向第三方平台 -->
        <template v-if="currentValue == 4 && item.value === currentValue">
          <ThirdPartyPlatform v-model="formData" class="ml-20" />
        </template>

        <template>
          <div
            class="mt-10"
            v-if="item.value !== 0 && item.value === currentValue && value.targetParam"
          >
            <el-tag v-if="currentValue === 1" closable @close="deleteSectionValue('sectionName')">{{
              sectionName
            }}</el-tag>

            <ClassifyTable
              v-if="currentValue === 2 && classifyTable && classifyTable.length"
              :classifyTable="classifyTable"
            />

            <GoodsTable
              v-if="currentValue === 3 && goodsTable && goodsTable.length"
              :goodsTable="goodsTable"
            />
          </div>
        </template>
      </el-radio>
    </el-radio-group>

    <!-- 指向栏目 -->
    <SectionPopup
      v-if="sectionVisible"
      v-model="formData.targetParam"
      :dialogVisible.sync="sectionVisible"
    />

    <!-- 指向分类 -->
    <ClassifyPopup
      v-if="classifyVisible"
      v-model="formData.targetParam"
      :dialogVisible.sync="classifyVisible"
    />

    <!-- 指向商品 -->
    <GoodsPopup
      v-if="goodsVisible"
      v-model="formData.targetParam"
      :dialogVisible.sync="goodsVisible"
    />
  </div>
</template>

<script>
import GoodsPopup from './GoodsPopup.vue'
import SectionPopup from './SectionPopup.vue'
import ClassifyPopup from './ClassifyPopup.vue'
import { mapMutations, mapState } from 'vuex'
import ClassifyTable from './ClassifyTable.vue'
import ThirdPartyPlatform from './ThirdPartyPlatform.vue'
import GoodsTable from './GoodsTable.vue'
import { POINT_PLACE_LABEL, SECTION_TYPE_LABEL } from '@/enum'
import _ from 'lodash'
export default {
  name: 'PointPosition',
  components: {
    GoodsPopup,
    SectionPopup,
    ClassifyPopup,
    ClassifyTable,
    GoodsTable,
    ThirdPartyPlatform
  },
  props: {
    value: Object,
    isTherePlatform: {
      key: Boolean,
      default: false
    }
  },
  data() {
    return {
      currentValue: 0,
      goodsVisible: false,
      sectionVisible: false,
      classifyVisible: false
    }
  },
  computed: {
    ...mapState('base', ['pointData']),
    formData: {
      get() {
        return this.value
      },
      set(val) {
        return val
      }
    },
    POINT_PLACE_LABEL() {
      const { isTherePlatform } = this
      const thereObj = {
        label: '指向第三方平台',
        value: 4
      }
      const newArr = _.cloneDeep(POINT_PLACE_LABEL)
      newArr.push(thereObj)
      return isTherePlatform ? newArr : POINT_PLACE_LABEL
    },
    // 选中的栏目
    sectionName() {
      return this.pointData.sectionName
    },
    // 选中的分类
    classifyTable() {
      return this.pointData.classifyTable
    },
    // 选中的商品
    goodsTable() {
      return this.pointData.goodsTable
    }
  },
  watch: {
    value: {
      handler(newValue) {
        this.currentValue = newValue.pointPlace
        // 初始化
        // if (newValue.targetParam) {
        //   this.loadPointData(newValue.targetParam)
        // }
      },
      deep: true
    },
    classifyTable(val) {
      if (!val.length && this.currentValue === 2) {
        this.formData.targetParam = ''
      }
    },
    goodsTable(val) {
      if (!val.length && this.currentValue === 3) {
        this.formData.targetParam = ''
      }
    }
  },
  mounted() {
    // this.loadPointData()
  },
  methods: {
    ...mapMutations('base', ['RESET_POINT_SELECT', 'SET_POINT_SELECT']),

    // 加载选中值 1: 栏目 2: 分类 3: 商品 4:指向第三方平台
    async loadPointData({ pointPlace, targetParam }) {
      switch (pointPlace) {
        case 1: {
          const sectionName = SECTION_TYPE_LABEL.find(item => item.value == targetParam)
          this.SET_POINT_SELECT({ key: 'sectionName', data: sectionName && sectionName.label })
          break
        }
        case 2: {
          const {
            data: { firstName, secondName, isRecommend }
          } = await this.$http.goods.classify.getById({
            params: { id: targetParam?.split(',')[1] }
          })
          this.SET_POINT_SELECT({
            key: 'classifyTable',
            data: [{ firstName, secondName, isRecommend }]
          })
          break
        }
        case 3: {
          const {
            data: { mainGraph, name, supplierName, minPrice, maxPrice, sellType }
          } = await this.$http.goods.goods.getById({
            params: { id: targetParam }
          })
          this.SET_POINT_SELECT({
            key: 'goodsTable',
            data: [{ mainGraph, name, supplierName, minPrice, maxPrice, sellType }]
          })
          break
        }
        default:
          break
      }
    },
    // 选择指向位置1: 栏目 2: 分类 3: 商品
    selectPoint(type) {
      if (type === 1) {
        this.sectionVisible = true
      } else if (type === 2) {
        this.classifyVisible = true
      } else {
        this.goodsVisible = true
      }
    },
    // 监听指向位置
    changePoint() {
      this.$emit('input', { ...this.value, targetParam: '', outsideType: '', iconThreePoint: '' })
      this.RESET_POINT_SELECT()
    },
    // 删除栏目选中值
    deleteSectionValue() {
      this.$emit('input', { ...this.value, targetParam: '', outsideType: '', iconThreePoint: '' })
      this.RESET_POINT_SELECT()
    }
  }
}
</script>

<style lang="scss" scoped>
.point-position {
  .el-radio-group {
    display: flex;
    flex-direction: column;
    .el-radio {
      margin: 15px 0;
      .el-radio__label {
        display: flex;
      }
    }
  }
}
</style>
